<template>
  <div class="pageContain" style="color: black; width: calc(100% - 2vw)">
    <div class="divBeteewn">
      <div
        class="addOneButton divCenter"
        style="margin-top: 2vh"
        @click="addOne()"
      >
        新增角色 +
      </div>
    </div>

    <el-col>
      <el-table
        :data="dataList"
        style="height: auto; width: 100%; margin-top: 2vh"
        max-height="65vh"
        :header-row-style="{
          height: '6vh',
          fontSize: '1vw',
          color: 'white',
          background: '#005EBC',
        }"
        :row-style="{
          height: '7vh',
          borderBottom: '1px solid black !important',
        }"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column prop="deviceName" label="姓名"> </el-table-column>
        <el-table-column prop="electId" label="用户名"> </el-table-column>

        <!-- <el-table-column prop="place" label="可管理设备" align="center">
        </el-table-column> -->
        <el-table-column
          prop="type"
          label="手机号"
          align="center"
        ></el-table-column>

        <el-table-column prop="state" label="设置" align="center"
          ><template #default="scoped">
            <div class="optContain divBeteewn">
              <div style="color: #005ebb" @click="editOne(scoped.row.id)">
                编辑
              </div>
              <div
                style="color: #005ebb"
                @click="deleteOne(scoped.row.id, scoped.row.deviceName)"
              >
                删除
              </div>
            </div>
          </template></el-table-column
        >
      </el-table>
    </el-col>

    <div class="dialog" :style="{ display: dialog2 }">
      <div class="dialogInner">
        <div class="dialogInnerText" style="width: 56vw">
          <div class="dialogTop divCenter">
            <div class="dialogName">{{ addOrEdit }}设备</div>
            <div class="dialogClose divCenter" @click="close()"></div>
          </div>
          <div class="dialogTips divCenter">
            确定要删除 &nbsp{{ this.form.deviceName }} &nbsp吗？
          </div>
          <div class="dubleButton divCenter">
            <div class="cancelButton divCenter" @click="close()">取消</div>
            <div class="sureButton divCenter" style="background: #d30000">
              确定
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog" :style="{ display: dialog3 }">
      <div class="dialogInner">
        <div class="dialogInnerText" style="width: 47.5vw">
          <div class="dialogTop divCenter">
            <div class="dialogName">{{ addOrEdit }}设备</div>
            <div class="dialogClose divCenter" @click="close()"></div>
          </div>
          <div class="form">
            <div class="inputInner divCenter">
              <div class="deviceName">姓名</div>
              <el-input style="border-right: 1px solid #0281b8"></el-input>
            </div>
            <div class="inputInner divCenter">
              <div class="deviceName">用户名</div>
              <el-input style="border-right: 1px solid #0281b8"></el-input>
            </div>
            <div class="inputInner divCenter">
              <div class="deviceName">手机号</div>
              <el-input style="border-right: 1px solid #0281b8"></el-input>
            </div>
            <div class="inputInner divCenter">
              <div class="deviceName">邮箱</div>
              <el-input style="border-right: 1px solid #0281b8"></el-input>
            </div>

            <div
              class="dubleButton divCenter"
              style="margin-top: 10vh; padding-bottom: 6vh"
            >
              <div
                class="cancelButton divCenter"
                style="background: #d30000"
                @click="close()"
              >
                取消
              </div>
              <div class="sureButton divCenter">确定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sendMessage from "@/mitt/sendMessage.js";
export default {
  name: "",
  beforeRouteEnter(to, from, next) {
    sendMessage(5, "角色管理");
    next();
  },
  data() {
    return {
      dialog2: "none",
      dialog3: "none",
      dialog4: "none",
      addOrEdit: "",
      dataList: [
        {
          deviceName: "角色1",
          electId: "25060915000103",
          place: "产线1",
          type: "XXXXXX",
          net: "XXXXXX",
          MQTT: "XXXXXX",
          state: "1",
          id: 1,
        },
        {
          deviceName: "角色2",
          electId: "25060915000103",
          place: "产线1",
          type: "XXXXXX",
          net: "XXXXXX",
          MQTT: "XXXXXX",
          state: "1",
          id: 1,
        },
      ],
      tableWidth: "",
      form: {
        deviceName: "",
        electId: "",
        type: "",
        place: "",
        net: "",
        MQTT: false,
        state: "",
      },
      id: null,

      bigScreen: false,
    };
  },
  props: [],

  methods: {
    showgroup() {
      this.dialog4 = "block";
    },
    showDetail() {
      this.dialog3 = "block";
    },
    deleteOne(id, name) {
      this.dialog2 = "block";
      this.id = id;
      this.form.deviceName = name;
    },
    sureDelete() {
      this.addOrEdit = "删除";
      this.dialog2 = "block";
    },
    editOne(a) {
      this.addOrEdit = "编辑";
      this.dataList.forEach((item) => {
        if (item.id == a) {
          this.form.deviceName = item.deviceName;
          this.form.electId = item.electId;
          this.form.place = item.place;
          this.form.type = item.type;
          this.form.net = item.net;
          this.form.MQTT = item.MQTT;
          this.form.state = item.state;
          this.id = a;
        }
      });
      this.dialog3 = "block";
    },
    clear() {
      this.form = {
        deviceName: "",
        electId: "",
        type: "",
        place: "",
        net: "",
        MQTT: false,
        state: "",
      };
      this.id = null;
    },
    addOne() {
      this.dialog3 = "block";
      this.addOrEdit = "新增";
    },
    close() {
      this.dialog2 = "none";
      this.dialog3 = "none";
      this.dialog4 = "none";

      this.clear();
    },
    handClick() {
      console.log(11111);
    },
    handResize() {
      this.tableWidth = window.innerWidth - 150 + "px";
      console.log(window.innerWidth);
      if (window.innerWidth > 1920) {
        this.bigScreen = true;
      } else {
        this.bigScreen = false;
      }
    },
    onSubmit() {
      console.log("submit!");
    },
    sendMessage() {
      let res = this.$route.path;
      EventBus.emit("custom-event", res);
    },
  },
  created() {
    this.handResize();
  },
  mounted() {
    // this.sendMessage();
    window.addEventListener("resize", this.handResize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handResize);
  },
};
</script>
<style lang="less" scoped>
// table的修改部分===========
.el-table {
  font-size: 1vw;
}
:deep(.el-table__cell) {
  padding: 0 !important;
  // border-bottom: 1px solid red;
}
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
  border-bottom: 1px solid #a4a6a7;
}
:deep(.el-table__cell .cell) {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 3.5vh;
  padding: 0 !important;
  // height: 7vh !important;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}
:deep(.el-table td.el-table__cell) {
  border-bottom: 1px solid #a4a6a7;
}
:deep(.el-table tr:last-child td) {
  border-bottom: none;
}
:deep(.el-table__row) {
  border-bottom: 1px solid black;
}
// table样式修改结束=======================
.el-input {
  width: 100%;
}
:deep.el-form-item__content {
  margin-left: 0 !important;
}

.optContain {
  width: 5.5vw;
}
.el-input {
  width: 20.3vw;
  height: 4.7vh;
}

:deep(.el-input__wrapper) {
  height: 4.7vh;
  background: #efefef !important;
}

:deep(.el-input__inner) {
  // height: 5vh !important;
  border: 1px solid #0281b8;
  font-size: 1vw;
  height: 4.7vh !important;
  text-indent: 0.5vw;
  border-right: none !important;
  // box-shadow: none !important;
}

:deep(.el-input__wrapper) {
  background: #efefef !important;
  border-right: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 3px;
}

.form {
  width: 90%;
  // height: 60vh;
  margin: auto;
  margin-top: 8vh;
  background: white;

  .inputInner {
    width: 100%;
    margin-bottom: 3.2vh;
    .deviceName {
      font-size: 1.2vw;
      font-weight: 400;
      width: 11.3vw;
      text-align: center;
      color: black;
    }
  }
}
</style>
